<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom02</title>
    <script>
        // 追加元素
        window.onload = function() {
            //创建新元素
            const p = document.createElement('p')
            const pText =  document.createTextNode("这个是追加的元素,追加在目标元素的最后一个子元素的后面")
            p.appendChild(pText)
            //在旧元素的基础上最佳新元素
            const foo = document.getElementById('foo')
            foo.appendChild(p)
        }
        // 点击变色
        function onClickTest() {
            document.body.style.backgroundColor = 'yellow';
        }

    </script>
</head>
<body>
<div id='foo'>
    <p onclick="onClickTest()">点击可以变色</p>
</div>
<h1 >Day 1</h1>
</body>
</html>